<template>
    <div class="nav">
      <div class="nav-my row-center">
        <img class="nav-my-img" />
      </div>
      <ul class="nav-list">
        <template>
          <div
            :class="[
              'nav-item',
              'row-center',
            ]"
          >
            <n-badge>
              <li :class="['iconfont']"></li>
            </n-badge>
          </div>
        </template>
      </ul>
      <div class="close">
        <n-tooltip placement="left-start" trigger="hover">
          <template #trigger>
            <span class="iconfont icon-guanji" @click=""></span>
          </template>
          有空再聊，再见！
        </n-tooltip>
      </div>
    </div>
  </template>
  
  <style scoped lang="less">
  .nav {
    height: 100%;
    width: 6%;
    position: relative;
    .close {
      position: absolute;
      top: 60%;
      left: 50%;
      transform: translate(-50%, -50%);
      .icon-guanji {
        font-size: 40px;
        border-radius: 50%;
        background: #fff;
        cursor: pointer;
      }
    }
  
    .nav-my {
      height: 20%;
      width: 100%;
      .nav-my-img {
        height: 40px;
        width: 40px;
        border-radius: 50%;
      }
    }
    .nav-list {
      /deep/ .n-badge {
        display: block;
      }
      .nav-item {
        height: 70px;
        line-height: 70px;
        width: 100%;
        cursor: pointer;
      }
      li {
        font-size: 30px;
        color: #fff;
        width: 30px;
        height: 30px;
        line-height: 30px;
      }
      .nav-select {
        background: @primary-bgcolor;
        box-shadow: inset -8px 8px 16px @boxshow-color4,
          inset 8px -8px 16px @boxshow-color5;
      }
    }
  }
  </style>  